<template>
	<view class="introduce">
		<view class="box">
			<view class="introduce_img">
				<image :src="teacher_introduce.avatar"></image>
			</view>
			<label>{{teacher_introduce.name}}</label>
			<span>Ant Collector</span>
			<view class="hr"></view>
			<view class="article">{{teacher_introduce.article}}</view>
			<view class="hr_2"></view>
			<view class="fuc">
				<view @click="gotoAppoint(teacher_introduce.id)">预约</view>
				<view>推荐</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				teacher_introduce:{
					id: '01',
					avatar: "https://tse1-mm.cn.bing.net/th/id/R-C.d42505ae674ff6c864342df41d38772c?rik=K8isCjRh3RVJ1g&riu=http%3a%2f%2fimg.keaitupian.cn%2fuploads%2f2020%2f10%2f15%2f9ea6b80da0694dec944ce0bc0aff59aa.jpg&ehk=ly3KeB8Qyu2dUTjy3yMCWeOq%2fHCeSgaPFFg4%2bE6pFyQ%3d&risl=&pid=ImgRaw&r=0",
					name: "赵静",
					article:"学生心理健康教育与咨询中心兼职咨询师，个人执业。 心理动力学取向。兼有长程和短程咨询经验。有丰富的生活和职场阅历。咨询风格温和，稳定，涵容，细腻。",
				}
			};
		},
		onLoad: (option) => {
			console.log(option.id)
		},
		methods:{
			gotoAppoint(e){
				let teacher_id = e
				uni.navigateTo({
					url: '/pages/select_time/select_time?id='+teacher_id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="less">
	.introduce {
		margin: 0 auto;
		padding: 0;
		.box {
			width: 680rpx;
			min-height: 700rpx;
			display: flex;
			border: 1px lightgray solid;
			box-shadow: 1px 6px 10px 1px lightgray;
			background-color: white;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			.fuc{
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;
				top: -3vh;
			 view{
				 border: 1px pink solid;
				 width: 90rpx;
				 text-align: center;
				 border-radius: 10px;
				box-shadow: 1px 6px 10px 1px lightgray;
			 }
			}
			.hr_2{
				position: relative;
				width:100%;
				height: 3rpx;
				top:-5vh;
				background-image:linear-gradient(to right,#7AFFAF, #ff585d) ;
			}
			.hr{
				position: relative;
				width:100%;
				height: 3rpx;
				top:-7vh;
				background-image:linear-gradient(to right,#ff585d, #7AFFAF) ;
			}
			.article{
				text-indent:20rpx;
				width: 640rpx;
				position: relative;
				line-height: 45rpx;
				text-align: justify;
				top:-6vh;
				
			}
			label{
				font-size: 30rpx;
				position: relative;
				top: -7vh;
			}
			span{
				font-size: 22rpx;
				color: gray;
			}
			.introduce_img{
				width: 200rpx;
				height: 200rpx;
				border: 1px lightgray solid;
				border-radius: 50%;
				overflow: hidden;
				position: relative;
				top: -5vh;
				z-index: 100;
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
	}
</style>
